<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>

  <div class="goods">
    <div class="normalgoods"></div>
  </div>
  <script src="../js/jquery.2.2.4.js"></script>
  <script>
    // $(".normalgoods").hover(function () {
    //   $(this).find("p").css("display", "none");
    // });
    // $(".normalgoods").hover(function () {
    //   $(this).find("button").css("display", "block");
    // });
    // $(".normalgoods").mouseleave(function () {
    //   $(this).find("p").css("display", "block");
    // });
    // $(".normalgoods").mouseleave(function () {
    //   $(this).find("button").css("display", "none");
    // });


    $(window).on("load", function () {
      $.ajax({
        url: "http://localhost:3000/goods",
        success: (res) => {
          console.log(res)
          goodshandle(res);
          console.log("恭喜你发现了这个地盘");
        }
      });
    });

    function goodshandle(g) {
      for (var i in JSON.parse(g)) {
        // console.log("描述:"+JSON.parse(g)[i].describe+"名字:"+JSON.parse(g)[i].name);
        $(".goods").find('.normalgoods').eq(i).append(`<a href="goods.html?id=${JSON.parse(g)[i].id}"><img src="${JSON.parse(g)[i].url}" alt=""><p>${JSON.parse(g)[i].describe}</p><p>${JSON.parse(g)[i].price}</p><button>查看详情</button></a>`);
      }
    }



    var oli = document.querySelectorAll(".banner li");
    for (let i = 0; i < oli.length; i++) {
      oli[i].onmouseenter = function () {
        var vis = document.querySelector(".visbanner" + i);
        vis.style = "display:block;"
        oli[i].onmouseleave = function () {
          vis.style = "display:none;"
        }
      }
    }




  </script>
</body>

</html>